<template>
    <div style="margin-left:16px">
          <el-skeleton animated :rows="8" :loading="data.isFirst">
  <el-descriptions title="新增用户" direction="vertical" :column="2" border>
                  
                   
                    <el-descriptions-item fixed label="账号*">
                        <el-input v-model="data.account"  maxlength="11"></el-input>
                    </el-descriptions-item>
                         <el-descriptions-item fixed label="名称*">
                        <el-input v-model="data.uname"></el-input>
                    </el-descriptions-item>
                     <el-descriptions-item fixed label="名称*">
                        <el-radio-group v-model="data.denger">
                        <el-radio value="男" >男</el-radio>
                        <el-radio value="女" >女</el-radio>
                      
                    </el-radio-group>
                    </el-descriptions-item>
                      <el-descriptions-item fixed label="部门名称">
                        <el-tag type="success">{{data.depname}}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item fixed label="职务">
                         <el-radio-group v-model="data.checkduty">
                <el-radio v-for="item in data.radio" :key="item.dutyid" :label="item.dutyid">{{ item.dutyname }}</el-radio>
                        </el-radio-group>
                    </el-descriptions-item>
                      <el-descriptions-item fixed label="操作">
                        <el-button type="success" @click="event.add">确认</el-button>
                    </el-descriptions-item>
                  

                </el-descriptions>
          </el-skeleton>
    </div>
</template>

<script setup lang="ts">
import {reactive,watchEffect} from 'vue';
import type {Dept_User_Index_Data} from '../../utils/types';
import {useRoute} from 'vue-router' 
import {Get_DutyUser,Get_DeptName,Add_User} from '../../api/org/dept'
import router from '@/router';
import { msg } from '@/utils/msg'
const data=reactive<Dept_User_Index_Data>({
    denger:"女",
    uname:"",
    account:"",
    deptid:"",
    checkduty:[],
    radio:[],
    depname:"",
    isFirst:true

})
const route=useRoute()


const event={
async add(){
const res=await Add_User({
    account:data.account,
    name:data.uname,
    deptid:data.deptid,
    dutyid:data.checkduty.toString(),
    gender:data.denger
});
if(res.code===0){
    msg(res);
    setTimeout(() => {
         router.push('/org/dept');
    }, 1000);
}

}
}

const method={
 async bind(){
        const res=await Get_DutyUser({
                id:data.deptid
        });
    data.radio=res.data;
    const ress=await Get_DeptName({
        id:data.deptid
    });
    data.depname=ress.data.depname
    data.isFirst=false;
}
}

watchEffect(()=>{
    data.deptid=route.params.id.toString();
   method.bind();
})

</script>

<style scoped>

</style>